<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>富文本的使用</title>
<style type="text/css">
body {
	width: 800px;
	margin: 0 auto 0 auto;
}
</style>
</head>
<body>

	<!--wangEditor 使用 B-->
	<div id="div1"></div>
	<!--wangEditor 使用 E-->
	<button id="addBtn" onclick="addNews()">增加</button>

</body>
<script type="text/javascript" charset="utf-8" th:src="@{jquery.js}"></script>
<script type="text/javascript" charset="utf-8"
	th:src="@{wangEditor.min.js}"></script>
<script type="text/javascript">
	var httpurl = "http://localhost:8081";

	//富文本使用
	var E = window.wangEditor;
	var editor = new E('#div1');
	//重新设置富文本的内容
	editor.customConfig.menus = [ 'head', // 标题
	'bold', // 粗体
	'fontSize', // 字号
	'italic', // 斜体
	'underline', // 下划线
	'foreColor', // 文字颜色
	'link', // 插入链接
	'justify', // 对齐方式
	'image', // 插入图片
	'undo', // 撤销
	'redo' // 重复
	];
	// 隐藏“网络图片”tab
	editor.customConfig.showLinkImg = false;
	// 将图片大小限制为 3M
	editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
	// 限制一次最多上传 1 张图片
	editor.customConfig.uploadImgMaxLength = 1;
	//开启wangEditor的错误提示
	editor.customConfig.debug = true;
	// 关闭粘贴样式的过滤
	editor.customConfig.pasteFilterStyle = false;
	// 忽略粘贴内容中的图片
	editor.customConfig.pasteIgnoreImg = true;

	//上传图片 将图片以文件的形式传给后台进行操作返回图片 url
	editor.customConfig.customUploadImg = function(files, insert) {
		var date = new FormData();
		date.append("file", files[0]);
		$.ajax({
			type : "POST",
			url : "/test/upload",
			data : date,
			dataType : 'json',
			async : false,
			cache : false,
			contentType : false,
			processData : false,
			success : function(result) {
				insert(result.data);// insert 是获取图片 url 后，插入到编辑器的方法
			}
		})
	};
	editor.create();//创建富文本

	/**
	 * 添加企业新闻
	 */
	function addNews() {
		var formData = new FormData();
		formData.append("news", editor.txt.html());
		$.ajax({
			type : "POST",
			url : "/test/addNews",
			data : formData,
			dataType : 'json',
			async : false,
			cache : false,
			contentType : false,
			processData : false,
			success : function(result) {
				alert(result);
				//console.log(result);
			}
		})
	}
</script>
</html>